<template>
<view :style="theme" class="page">
	<!-- 头部组件 -->
	<u-sticky z-index="0" :offset-top="gaodu"  :bgColor="fenggeyanse =='light'? '#fff4f4':'#242424'">
		<!-- #ifdef APP-PLUS -->
		<u-gap height="30" bgColor="#ffffff"></u-gap>
		<!-- #endif -->
		<view class="d-kuan-10">
			<view class="d-beijing-bai ">
				<view class="d-yuanjiao-10 d-neikuang-5 ">
					<u-row
						customStyle="margin-bottom: 10px"
						gutter="10"
					>
						<u-col span="4">
							<view class="demo-layout bg-purple d-neirong-juzhong d-box" @click="quanzilian(1)">
								<image mode="aspectFill" src="/static/images/quanbu.png" class="d-yuanjiao-10 d-img-40 d-shang-10" ></image>
								
								<view class="d-wenzi-yanse-hui d-ziti-12">全部圈子</view>
							</view>
						</u-col>
						<u-col span="4">
							<view class="demo-layout bg-purple d-neirong-juzhong d-box" @click="quanzilian(2)">
								
								<image mode="aspectFill" src="/static/images/woquan.png" class="d-yuanjiao-10 d-img-40 d-shang-10" ></image>
								
								<view class="d-wenzi-yanse-hui d-ziti-12">我的圈子</view>
							</view>
						</u-col>
						<u-col span="4">
							<view class="demo-layout bg-purple d-neirong-juzhong d-box" @click="quanzilian(3)">
	
								<image mode="aspectFill" src="/static/images/jiaquan.png" class="d-yuanjiao-10 d-img-40 d-shang-10" ></image>
								
								<view class="d-wenzi-yanse-hui d-ziti-12">加入圈子</view>
							</view>
						</u-col>
					</u-row>
				</view>
			</view>
		</view>
	</u-sticky>

	<!---->
	

	<!---->
	<!--我的圈子-->
	<!--view class="d-kuan">
		<view class="d-neikuang-10">
			<view class="d-kuan d-beijing-bai d-yuanjiao-10">
				<view class="d-neikuang-10">
					<view class="">
						<view class="d-zuo d-xia-10 d-jiacu">我的圈子</view>
						<view class="d-you d-xia-10 d-wenzi-yanse-hui">管理</view>
					</view>
					<view class="d-clear"></view>
					
					<view class="d-kuan-25 d-zuo d-neirong-juzhong d-xia-10">
						<image src="/static/images/img/jiaquan.svg" class="d-img-40" ></image>
						<view class="d-wenzi-12">加入圈子</view>
					</view>
					
					<view class="d-clear"></view>
				</view>
			</view>
		</view>
	</view-->
	<view class="d-kuan" style="z-index: 1000;">
		<view class="d-neikuang-10">
			<view class="d-kuan d-beijing-bai d-yuanjiao-10">
				<view class="d-neikuang-10">
					<!--view class="">
						<view class="d-zuo d-xia-10 d-jiacu">圈子</view>
					</view-->
					<view class="d-clear"></view>
					<view v-if="daohangzhanshi ==1">
						<y-tabs  v-model="activeIndex" :color="fenggeyanse=='light' ? '#151515' : '#ffffff'" :title-active-color="fenggeyanse=='light' ? '#151515' : '#ffffff'" direction="vertical" sticky :background="fenggeyanse=='light' ? '#ffffff' : '#151515'" animated  @sticky-change="stickyChange" :offsetTop="offsetTop" scrollspy>
							<!-- 标签栏右侧内容 -->
							<!--template #nav-right>
								<view class="nav-right-wrap">
									<text class="text">更多</text>
									<uni-icons type="right" :color="'#5e6d82'" size="14" />
								</view>
							</template-->
						
							<y-tab class="y-tab-virtual "  v-for="(item, index) in quanlist" :title="item.name" :key="index">
								<view class="d-kuan d-beijing-bai">
									
								
									<view class="d-kuan">
										<view class="d-zuo-10 d-xia-10 d-wenzi-hei">{{item.name}}</view>
									</view>
									<view class="d-beijing-hui-f6 d-yuanjiao-10 d-xia-10 d-zuo-10" v-for="(items, indexd) in item.quan" :key="indexd">
										
										<view class="d-neikuang-10 d-buhuanhang " @click="()=>quanzi(items.id)">
											<view class="d-kuan-40">
												<image :src="items.tubiao" class="d-img-40" ></image>
											</view>
											<view class="d-kuan d-zuo-10">
												<view class="d-jiacu d-wenzi-hei">{{items.title}}</view>
												<view class="d-wenzi-12 d-wenzi-yanse-hui">帖子：{{items.tieshu}}</view>
											</view>
											<view class="d-kuan-100">
												<view class="d-shang-10 d-neirong-juzhong d-hanggao-25 d-wenzi-yanse-bai d-wenzi-14 d-beijing-hei d-yuanjiao-50 d-kuan-50 d-gao-26">浏览</view>
											</view>
										</view>
										
										<view class="d-clear"></view>
									</view>
									<u-gap height="10" :bgColor="fenggeyanse=='light' ? '#ffffff' : '#151515'"></u-gap>
								
								</view>
							</y-tab>
						</y-tabs>
					</view>
					<view v-else>
					<!--圈子-->
						<block v-for="(item, index) in quanlist" :key="index">
							<view class="">
								<view class="d-zuo d-xia-10 d-wenzi-hei">{{item.name}}</view>
							</view>
							<view class="d-clear"></view>
							
								<view class="d-beijing-hui-f6 d-yuanjiao-10 d-xia-10" v-for="(items, indexd) in item.quan" :key="indexd">
									<view class="d-neikuang-10 d-buhuanhang" @click="()=>quanzi(items.id)">
										<view class="d-kuan-40">
											<image :src="items.tubiao" class="d-img-40" ></image>
										</view>
										<view class="d-kuan d-zuo-10">
											<view class="d-jiacu d-wenzi-hei">{{items.title}}</view>
											<view class="d-wenzi-12 d-wenzi-yanse-hui">帖子：{{items.tieshu}}</view>
										</view>
										<view class="d-kuan-100">
											<view class="d-shang-10 d-neirong-juzhong d-hanggao-25 d-wenzi-yanse-bai d-wenzi-14 d-beijing-hei d-yuanjiao-50 d-kuan-50 d-gao-26">浏览</view>
										</view>
									</view>
								</view>
								<view class="d-clear"></view>
							
						</block>
					</view>
					
				</view>
			</view>
		</view>
	</view>
	<!--zwTabBar
	:defaultSel="1"
	:fenggeyanse="fenggeyanse" 
	:list="fenggeyanse=='light' ? tabBarList : tabBarListhei" 
	@clickTab="clickTab" 
	:bigIdx="2"
	:hoverColor="fenggeyanse=='light' ? '#000000' : '#41b883'"
	:color="fenggeyanse=='light' ? '#41b883' : '#6b6b6b'"
	>
	</zwTabBar-->

</view>
</template>

<script>
import toubu from "@/components/toubu/toubu";  //引入头部组件
import config from "../../utils/config";
import zwTabBar from "@/components/zw-tabbar/zw-tabbar";

var Api = require("../../utils/api.js");
var util = require("../../utils/util.js");

var wxApi = require("../../utils/wxApi.js");
var wxRequest = require("../../utils/wxRequest.js");
var webSiteName = config.getWebsiteName;
var domain = config.getDomain;

export default {
  data() {
    return {
      text: "圈子",
      categoriesList: {},
      floatDisplay: "none",
      userInfo: {},
      webSiteName: webSiteName,
      domain: domain,
	  www: [],
	  quanlist: [],
	  quanid:'',
	  uid:'',
	  keycode:'',
	  tiezileixing:[
	  	{
	  		name: '所有圈子',
	  	}, {
	  		name: '我的圈子',
	  	}, {
	  		name: '加入圈子',
	  	}
	  ],
	  tiezileixingquan: 0,
	  guanzhutu:config.getDomain+'/static/default/web/img/data.png',
	  gaodu:'',
	  fenggeyanse:'',
	  daohangzhanshi:'',
	  activeIndex: 0, // 标签页当前选择项的下标
	  offsetTop: 0, //粘性定位布局下与顶部的最小距离
	  navHeight: 500, //顶部导航区域高度
	  isFixed: true, //标签栏是否滚动吸顶
	  tabBarIdx: 1,
	  tabBarList: [{
	          // "isTabBar":true,//是tabBar页面
	          // "pagePath": "/pages/home",
	          "isTabBar":true,//是tabBar页面
	          "pagePath": "/pages/index/index",
	          "iconPath": "/static/images/shouye.png",
	          "selectedIconPath": "/static/images/shouye2.png",
	          "text": "首页"
	      }, {
	          // "pagePath": "/pages/home",
	  		"isTabBar":true,//是tabBar页面
	          "pagePath": "/pages/quan/quan",
	          "iconPath": "/static/images/quan.png",
	          "selectedIconPath": "/static/images/quan2.png",
	          "text": "圈子"
	      },
	      {
	          // "pagePath": "/pages/home",
	  		"isTabBar":true,//是tabBar页面
	          "pagePath": "/pages/xiaoxi/xiaoxi",
	          "iconPath": "/static/images/duanxin0.png",
	          "selectedIconPath": "/static/images/duanxin1.png",
	          "text": "消息"
	      },
	      {
	          // "pagePath": "/pages/home",
	          "pagePath": "/pages/xiaoxi/xiaoxi",
	          "iconPath": "/static/images/duanxin0.png",
	          "selectedIconPath": "/static/images/duanxin1.png",
	          "text": "消息"
	      }, {
	          // "pagePath": "/pages/home",
	  		"isTabBar":true,//是tabBar页面
	          "pagePath": "/pages/wo/wo",
	          "iconPath": "/static/images/wo.png",
	          "selectedIconPath": "/static/images/wo2.png",
	          "text": "我的"
	      }
	  ],
	  tabBarListhei: [{
	          // "isTabBar":true,//是tabBar页面
	          // "pagePath": "/pages/home",
	          "isTabBar":true,//是tabBar页面
	          "pagePath": "/pages/index/index",
	          "iconPath": "/static/images/shouye2-anhei.png",
	          "selectedIconPath": "/static/images/shouye-anhei.png",
	          "text": "首页"
	      }, {
	          // "pagePath": "/pages/home",
	  		"isTabBar":true,//是tabBar页面
	          "pagePath": "/pages/quan/quan",
	          "iconPath": "/static/images/quan2-anhei.png",
	          "selectedIconPath": "/static/images/quan-anhei.png",
	          "text": "圈子"
	      },
	      {
	          // "pagePath": "/pages/home",
	  		"isTabBar":true,//是tabBar页面
	          "pagePath": "/pages/xiaoxi/xiaoxi",
	          "iconPath": "/static/images/duanxin0-anhei.png",
	          "selectedIconPath": "/static/images/duanxin1-anhei.png",
	          "text": "消息"
	      },
	      {
	          // "pagePath": "/pages/home",
	  		"isTabBar":true,//是tabBar页面
	          "pagePath": "/pages/xiaoxi/xiaoxi",
	          "iconPath": "/static/images/duanxin0-anhei.png",
	          "selectedIconPath": "/static/images/duanxin1-anhei.png",
	          "text": "消息"
	      }, {
	          // "pagePath": "/pages/home",
	  		"isTabBar":true,//是tabBar页面
	          "pagePath": "/pages/wo/wo",
	          "iconPath": "/static/images/wo-anhei.png",
	          "selectedIconPath": "/static/images/wo-anhei.png",
	          "text": "我的"
	      }
	  ],
    };
  },

  components: {
	  toubu,
	  zwTabBar
  },
  computed: {
  	// 固定的标签页的标签栏样式
  	wrapStyle() {
  		return {
  			// 吸顶时给定一个等于导航高度的paddingTop值，用于遮住透明的导航+状态栏区域
  			paddingTop: this.isFixed ? this.navHeight + 'px' : 0
  		}
  	},
  	// 标签栏背景色
  	background() {
  		// 吸顶时标签栏背景色为白色，否则为灰色
  		return this.isFixed ? "#7cff2a" : "#f5d893"
  	},
  },
  props: {},
  onLoad: function (options) {
	  var duixin = this;
	  duixin.quanid = options.id;
	  duixin.getGaodu();
	  duixin.getDangqianurl();//获取当前网址
    this.getWww();
	this.getQuanList();
    uni.setNavigationBarTitle({
      title: '圈子'
    });
	
	
	
	var keycode = uni.getStorageSync('keycode');
	duixin.keycode = keycode;
	var uid = uni.getStorageSync('memberuid');
	duixin.uid = uid;
	
  },
  onShow: function () {
	  var duixin = this;
	  // 暗黑模式
	  var initialThemes = uni.getStorageSync('theme');
	  if(!initialThemes){
	  	duixin.fenggeyanse = 'light';
	  	uni.setStorageSync('theme', 'light');
	  } else {
	  	duixin.fenggeyanse = initialThemes;
	  }
	uni.setNavigationBarColor({
		backgroundColor: this.fenggeyanse =='light'? '#ffffff':'#151515',
		frontColor: this.fenggeyanse =='light'? '#000000':'#ffffff',
	})
  },
  onShareAppMessage: function () {
    return {
      title: '分享“' + config.getWebsiteName + '”圈子.',
      path: 'pages/quanzi/quanzi?id='+this.quanid,
      success: function (res) {// 转发成功
      },
      fail: function (res) {// 转发失败
      }
    };
  },
  onUnload: function () {
  	this.tabBarIdx;
	this.tabBarListhei;
	this.tabBarList;
  	console.log('销毁');
  },
  
  methods: {
	getGaodu(){
	  var duixin = this;

	  // #ifdef H5 || APP-PLUS
	   duixin.gaodu='-44';
	  // #endif
	  // #ifdef APP-PLUS
	   duixin.gaodu='0';
	  // #endif
	  // #ifdef MP
			duixin.gaodu='0';
	  // #endif
	},
	//获取站点
	getWww() {
	  	var self = this;
		var duixin = this;
	  	self.setData({
	  	  www: []
	  	});
	  	var getTubiaoRequest = wxRequest.getRequest(Api.getWwwUrl());
	  	getTubiaoRequest.then(response => {
	  		if (response.data.code == 1) {
	  		  //console.log(response.data.data); 
	  		  self.www = response.data.data;
			  // #ifdef H5
			  duixin.getWeixinFenxiangMiyueData(response.data.data);
			  // #endif
	  		} else {
	  		  self.setData({
	  			displaySwiper: "none"
	  		  });
	  		}
	  	});
		
	},
	//获取圈子列表
	getQuanList() {
	  	var duixin = this;
	  	duixin.setData({
	  	  quanlist: []
	  	});
		if(duixin.tiezileixingquan ==2){
			var jiaru = '2';
		} else {
			var jiaru = '';
		}
	  	var getQuanListRequest = wxRequest.getRequest(Api.getQuanlistUrl()+'&uid='+duixin.uid+'&jiaru='+jiaru);
	  	getQuanListRequest.then(response => {
	  		if (response.data.code == 1) {
	  		  //console.log('quanlist',response.data.data); 
	  		  duixin.quanlist = response.data.data;
			  // console.log('daohangzhanshi',response.data.data[999999].daohangzhanshi);
			  duixin.daohangzhanshi = response.data.data[999999].daohangzhanshi;
	  		} else {
	  		  duixin.setData({
	  			displaySwiper: "none"
	  		  });
			  duixin.daohangzhanshi = 0;
	  		}
	  	});
	},

    reloadData: function (id) {
      var self = this;
      var newCategoriesList = [];
      var categoriesList = self.categoriesList;

      for (var i = 0; i < categoriesList.length; i++) {
        if (categoriesList[i].id == id) {}

        newCategoriesList.push(categoriesList[i]);
      }

      if (newCategoriesList.length > 0) {
        self.setData({
          categoriesList: newCategoriesList
        });
      }
    },
    //跳转至某分类下的文章列表
    redictIndex: function (e) {
      //console.log('查看某类别下的文章');  
      var id = e.currentTarget.dataset.id;
      var name = e.currentTarget.dataset.item;
      var url = '../list/list?categoryID=' + id;
      uni.navigateTo({
        url: url
      });
    },
	// 点击
	quanzi(tieid) {
		//console.log('点击',tieid); 
		var url = '../quanzi/quanzi?&id='+tieid;
		uni.navigateTo({
			url: url
		});
	},
	//展示不同的页面
	yemian(e){
		var duixin = this;
		duixin.tiezileixingquan = e.index;
		if(e.index == 1){
			uni.navigateTo({
				url: '/pages/quanzi/woquan'
			});
		}
		if(e.index == 2){
			uni.navigateTo({
				url: '/pages/quanzi/wojiaruquan'
			});
		}
	},
	//获取当前页面
	getDangqianurl() {
		//获取当前页面栈的实例
		let pages = getCurrentPages();
		//获取当前页面
		let currentPage = pages[pages.length-1].$page.fullPath;
		let url = currentPage;
		uni.setStorageSync('dangqianUrl', url);
	},
	quanzilian(e){
		if(e==1){
			uni.navigateTo({
				url: '/pages/quan/quan'
			});
		} else if (e==2){
			uni.navigateTo({
				url: '/pages/quanzi/woquan'
			});
		} else if (e==3){
			uni.navigateTo({
				url: '/pages/quanzi/wojiaruquan'
			});
		}
		
	},
	// 吸顶时触发，仅在 sticky 模式下生效
	stickyChange(res) {
		this.isFixed = res.isFixed
	},
	clickTab(idx) {
	    var duixin =this;
	    duixin.tabBarIdx = idx;
		//uni.setStorageSync('tabBarIdx', idx);
	    console.log('clickTab',idx);
		//console.log('isTabBar',this.tabBarList[idx].pagePath);
		if(this.fenggeyanse=='light'){
			if(this.tabBarList[idx].pagePath){
			    if(this.tabBarList[idx].isTabBar){
					var url = this.tabBarList[idx].pagePath;
					//var url = '/pages/quan/quan';
			        uni.switchTab({
						url: url
			        });
			    }else{
					var url = this.tabBarList[idx].pagePath;
			        uni.navigateTo({
			            url: url
			        });
			    }
			    
			}
		} else {
			if(this.tabBarListhei[idx].pagePath){
			    if(this.tabBarListhei[idx].isTabBar){
					var url = this.tabBarListhei[idx].pagePath;
					//var url = '/pages/quan/quan';
			        uni.switchTab({
						url: url
			        });
			    }else{
					var url = this.tabBarListhei[idx].pagePath;
			        uni.navigateTo({
			            url: url
			        });
			    }
			    
			}
		}
		
	},
	// 微信分享密钥
	getWeixinFenxiangMiyueData(data){
		var duixin = this;
		var danqianurls = uni.getLaunchOptionsSync();
		//var danqianurls = '/'+danqianurls.path+'?id='+danqianurls.query.id;
		var danqianurls = '/'+danqianurls.path;
		
		const url = decodeURIComponent(window.location.href);
		var urljia = danqianurls;
		//console.log('urljia',urljia);
		//console.log('www',data); 
		var getWeixinfengxiangmiyueRequest = wxRequest.getRequest(Api.getWeixinfengxiangmiyue(url));
		getWeixinfengxiangmiyueRequest.then(response => {
			if (response.data.code == 1) {
				
			  var weixin = response.data.data;
			  //console.log('weixinweixin',weixin); 
			  duixin.weixinfenxiangmiyue = response.data.data
				duixin.$wx.config({
				  debug: false,//true
				  appId: weixin.appId,
				  timestamp: weixin.timestamp,
				  nonceStr: weixin.nonceStr,
				  signature: weixin.signature,
				  jsApiList: [
				    // 所有要调用的 API 都要加到这个列表中
				    
				    // 这里需要自己按微信文档来写参数
				    "updateAppMessageShareData", 
					"updateTimelineShareData",
					'checkJsApi', //判断当前客户端版本是否支持指定JS接口  
					'onMenuShareAppMessage', //分享接口  
					'getLocation', //获取位置  
					'openLocation', //打开位置  
					'scanQRCode', //扫一扫接口  
					'chooseWXPay', //微信支付  
					'chooseImage', //拍照或从手机相册中选图接口  
					'previewImage', //预览图片接口  
					'uploadImage' //上传图片  
				  ]
				});
				duixin.$wx.ready(function () {
				     // 自定义“分享给朋友”及“分享到QQ”按钮的分享内容
				     duixin.$wx.updateAppMessageShareData({ 
				      title: '圈子列表 -'+data.meta_title, // 分享标题
				      desc: data.meta_description, // 分享描述
				      link: url, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
						imgUrl: data.logoico, // 分享图标
				      success: function () {
				        // 设置成功
				      },
					    complete:function(argv){
					        
					    }
				    });
				    //自定义“分享到朋友圈”及“分享到QQ空间”按钮的分享内容
				    duixin.$wx.updateTimelineShareData({
				      title: '圈子列表 -'+data.meta_title, // 分享标题
					  desc: data.meta_description, // 分享描述
				      link: url, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
				      imgUrl: data.logoico, // 分享图标
				      success: function () {
				        // 设置成功
						//console.log('weixinmiyue2222',duixin.www.meta_title); 
				      }
				    });
				});
				duixin.$wx.error(function(res){
				  //console.log('weixinres',res); 
				});
				
			} else {
			  duixin.setData({
				displaySwiper: "none"
			  });
			}
		});
	},
  },
  created(){
  	  
  },
};
</script>
<style>
@import "./quan.css";
/*page {
	background-color: #f3f4f7;
}*/
.y-tab-virtual {
    position: relative;
    flex-shrink: 0;
    width: 100%;
}
</style>